<template>
    <form class="row gy-2 gx-3 align-items-center" @submit.prevent="onFormSubmit">

        <div class="col-auto">
            <label class="visually-hidden" for="autoSizingInputGroup">Username</label>
            <div class="input-group">
                <div class="input-group-text">任务</div>
                <input type="text" class="form-control" placeholder="请输入任务信息" v-model.trim="taskname"
                    style="width:357px">
            </div>
        </div>

        <div class="col-auto">
            <button type="submit" class="btn btn-primary">添加新任务</button>
        </div>
    </form>
</template>

<script>
export default {
    name: "TodoInput",
    data() {
        return {
            taskname: ""
        }
    },
    emits: ['add'],
    methods: {
        onFormSubmit() {
            if (!this.taskname) return alert("任务名称不能为空")
            this.$emit('add', this.taskname)
            this.taskname = ''
        }
    }
}
</script>

<style lang="less" scoped>
</style>